<template>
  <div class="container">
    <div class="tags-container">
      <el-card>
        <el-row>
          <el-col :span="18">
            <el-form :inline="true">
              <el-form-item label="标签名称" size="small" label-width="80px">
                <el-input v-model="tagName"></el-input>
              </el-form-item>
              <el-form-item label="状态" size="small" label-width="80px">
                <el-select v-model="defaultOption" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item size="small" style="text-align: right">
                <el-button size="small" @click="reset">清除</el-button>
                <el-button size="small" type="primary" @click="search(tagName)"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button
                size="small"
                type="success"
                icon="el-icon-edit"
                @click="addTags"
                >新增标签</el-button
              >
            </el-row>
          </el-col>
        </el-row>
        <el-alert
          type="info"
          show-icon=""
          :title="`数据一共${total}条`"
          style="margin-bottom: 15px"
          :closable="false"
        >
        </el-alert>
        <el-table
          :data="list"
          :header-cell-style="{ background: 'rgb(250,250,250)' }"
        >
          <el-table-column
            align="center"
            prop="id"
            label="序号"
            width="80px"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="subjectName"
            label="所属学科"
            width="210px"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="tagName"
            label="标签名称"
            width="210px"
          >
          </el-table-column>
          <el-table-column align="center" label="创建者" width="210px">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="addDate"
            label="创建日期"
            width="210px"
            :formatter="formatTime"
          >
          </el-table-column>
          <el-table-column align="center" label="状态" width="210px">
            <template v-slot="{ row }">
              <span v-if="row.state == 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button size="medium" type="text" @click="change(row)">{{
                row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                size="medium"
                type="text"
                @click="updateTags(row)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                size="medium"
                type="text"
                @click="delTags(row)"
                :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            layout="total, prev ,pager ,next , sizes ,jumper"
            :page-size="pageDate.pagesize"
            :total="total"
            :current-page="pageDate.page"
            @current-change="changePage"
            @size-change="handleSizeChange"
            :page-sizes="[5, 10, 20]"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="400px"
      close="btnCancel"
    >
      <el-form ref="tagForm" :rules="rules" :model="formDate">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select
            placeholder="请选择"
            size="small"
            style="width: 260px"
            v-model="formDate.subjectID"
          >
            <el-option
              v-for="item in subjectDate"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input
            style="width: 260px"
            placeholder="请输入目录名称"
            size="small"
            v-model="formDate.tagName"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-col :span="12">
          <el-button @click="btnCancel">取消</el-button>
          <el-button type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  remove,
  detail,
  update,
  changeState
} from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      options: [
        {
          label: '已开启',
          value: 1
        },
        {
          label: '已禁用',
          value: 0
        }
      ],
      defaultOption: '',
      list: [],
      pageDate: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      showDialog: false,
      subjectDate: [],
      formDate: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '所属学科不能为空', trigger: 'change' }
        ],
        tagName: [
          { required: true, message: '标签名字不能为空', trigger: 'blur' }
        ]
      },
      tagName: '',
      state: 1
    }
  },
  created () {
    this.getTags()
    this.getsubject()
  },
  computed: {
    title () {
      return this.formDate.id ? '编辑目录' : '新增目录'
    }
  },
  methods: {
    formatTime (row, column) {
      const data = row[column.property]
      const dtime = new Date(data)
      const year = dtime.getFullYear()
      let month = dtime.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = dtime.getDate()
      if (day < 10) {
        day = '0' + day
      }
      let hour = dtime.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      let minute = dtime.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      let second = dtime.getSeconds()
      if (second < 10) {
        second = '0' + second
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hour +
        ':' +
        minute +
        ':' +
        second
      )
    },
    async getTags () {
      const result = await list(this.pageDate)
      this.list = result.data.items
      this.total = result.data.counts
      // console.log(this.list)
    },
    addTags () {
      this.showDialog = true
    },
    btnCancel () {
      this.formDate = {
        subjectID: '',
        tagName: ''
      }
      this.showDialog = false
    },
    async getsubject () {
      const result = await simple(this.pageDate)
      this.subjectDate = result.data
      // console.log(this.subjectDate)
    },
    btnOK () {
      // 1.手动校验表单
      this.$refs.tagForm.validate(async (isOK) => {
        if (isOK) {
          // 判断有没有id
          if (this.formDate.id) {
            // 编辑
            // 表单验证通过 发送请求存储数据(后台更新 )
            await update(this.formDate)
          } else {
            // 新增
            // 表单验证通过 发送请求存储数据(后台更新 )
            await add(this.formDate)
          }
          this.getTags()
          this.$message.success('操作成功')
          // 关闭弹层
          this.showDialog = false
          // 清空表单
          this.formDate = {
            subjectID: '',
            tagName: ''
          }
        }
      })
    },
    // 删除
    async delTags (row) {
      try {
        await this.$confirm('您确定要删除该标签吗')
        await remove(row)
        // 拉取最新的数据
        this.getTags()
        this.$message.success('删除标签成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 修改
    async updateTags (row) {
      const result = await detail(row)
      this.formDate = result.data
      this.showDialog = true
      console.log(result.data)
    },
    // 搜索
    async search (value) {
      const result = await list(this.pageDate)
      this.list = result.data.items.filter(
        (item) =>
          item.tagName.includes(value) && item.state === this.defaultOption
      )
    },
    reset () {
      this.tagName = ''
      this.defaultOption = ''
      this.getTags()
    },
    // 修改状态
    async change (row) {
      await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
      this.getTags()
      this.$message.success('操作成功')
    },
    // 切换页数
    changePage (newPage) {
      this.pageDate.page = newPage
      this.getTags()
    },
    handleSizeChange (val) {
      this.pageDate.pagesize = val
      this.getTags()
    }
  }
}
</script>

<style scoped>
.tags-container {
  padding: 10px;
}
</style>
